import React from 'react';
import { useToast } from '../components/Toast';

export const ToastDemo = () => {
  const toast = useToast();

  const showSuccessToast = () => {
    toast.success(
      'LLM Settings Saved', 
      'Your LLM configuration has been updated successfully.'
    );
  };

  const showErrorToast = () => {
    toast.error(
      'Connection Failed', 
      'Unable to connect to the API server. Please check your network connection.'
    );
  };

  const showInfoToast = () => {
    toast.info(
      'Update Available', 
      'A new version of the application is available. Please update to access the latest features.'
    );
  };

  const showWarningToast = () => {
    toast.warning(
      'Low Storage Space', 
      'Your device is running low on storage space. Please free up some space to continue.'
    );
  };

  const showCustomDurationToast = () => {
    toast.info(
      'Custom Duration', 
      'This toast will disappear in 5 seconds.',
      5000
    );
  };

  return (
    <div className="container mx-auto py-8 px-4">
      <h1 className="text-2xl font-bold mb-6 dark:text-white">Toast 消息演示</h1>
      
      <div className="bg-white dark:bg-gray-800 rounded-lg shadow-md p-6">
        <div className="space-y-4">
          <h2 className="text-lg font-medium dark:text-white">消息类型</h2>
          
          <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
            <button
              onClick={showSuccessToast}
              className="p-3 bg-green-100 text-green-800 rounded-md hover:bg-green-200 transition-colors"
            >
              显示成功消息
            </button>
            
            <button
              onClick={showErrorToast}
              className="p-3 bg-red-100 text-red-800 rounded-md hover:bg-red-200 transition-colors"
            >
              显示错误消息
            </button>
            
            <button
              onClick={showInfoToast}
              className="p-3 bg-blue-100 text-blue-800 rounded-md hover:bg-blue-200 transition-colors"
            >
              显示信息消息
            </button>
            
            <button
              onClick={showWarningToast}
              className="p-3 bg-yellow-100 text-yellow-800 rounded-md hover:bg-yellow-200 transition-colors"
            >
              显示警告消息
            </button>
          </div>
          
          <div className="mt-8">
            <h2 className="text-lg font-medium mb-4 dark:text-white">自定义选项</h2>
            
            <button
              onClick={showCustomDurationToast}
              className="p-3 bg-purple-100 text-purple-800 rounded-md hover:bg-purple-200 transition-colors"
            >
              显示自定义时长消息 (5秒)
            </button>
          </div>
        </div>
      </div>
    </div>
  );
}; 